<template>
	<uni-table border stripe>
		<uni-tr>
			<uni-td width="50">编码</uni-td>
			<uni-td>
				<uni-data-checkbox v-model="options.encoding" :localdata="listEncoding"></uni-data-checkbox>
			</uni-td>
		</uni-tr>
		<uni-tr>
			<uni-td>模式</uni-td>
			<uni-td>		
				<uni-data-checkbox v-model="options.sendMod" :localdata="sendMods"></uni-data-checkbox>
				<view class="uni-list">
					<!-- <view class="uni-list-cell uni-list-cell-pd">
						<view class="uni-list-cell-db"></view>
						<uni-data-checkbox v-model="options.sendMod" :localdata="sendMods"></uni-data-checkbox>
					</view> -->
					<view class="uni-list-cell uni-list-cell-pd"  v-if="options.sendMod == 'auto'">
						<view class="uni-list-cell-db">发送间隔(ms)</view>
						<uni-number-box  v-model="options.autoInterval"></uni-number-box>
					</view>
				</view>		
			</uni-td>
		</uni-tr>
		<uni-tr>
			<uni-td>等待</uni-td>
			<uni-td>
				<view class="uni-list">
					<view class="uni-list-cell uni-list-cell-pd">
						<view class="uni-list-cell-db">收到回答后发送下一帧 </view>
						<switch :checked="options.isWaitAnswer" @change="(e)=>{emit('onUpdate','isWaitAnswer',e.detail.value);}" style="transform:scale(0.6)"/>
					</view>	
					<view class="uni-list-cell uni-list-cell-pd" v-if="options.isWaitAnswer">
						<view class="uni-list-cell-db">超时时间(秒)</view>
						<uni-number-box v-model="options.waitAnswerExpirse"></uni-number-box>
					</view>
					<view class="uni-list-cell uni-list-cell-pd"  v-if="options.isWaitAnswer">
						<view class="uni-list-cell-db">重发次数</view>
						<uni-number-box  v-model="options.waitAnswerExpirseReply"></uni-number-box>
					</view>
				</view>															
			</uni-td>
		</uni-tr>
		<uni-tr>
			<uni-td>命令</uni-td>
			<uni-td>
				<view class="uni-list">
					<view :key="item.Idx" class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in options.commands">
						<view class="uni-list-cell-db">
							{{item.Idx}}:{{item.command}} 
							<uni-tag :inverted="true" :text="`${item.devType}/${item.Name}`" type="primary" />
						</view>
						<uni-icons type="right" @click="openCommandsActions(item,index)"></uni-icons>
					</view>
					<view class="uni-list-cell uni-list-cell-pd" style="padding:5px 5px">
						<view class="uni-list-cell-db">
							添加命令
						</view>
						<uni-icons type="plus" color="#ff6a00"></uni-icons>
					</view>
				</view>
			</uni-td>
			<uni-popup ref="popupSettingsCommands" type="bottom">
				<button type="primary" v-if="editCommandArrayIndex < 1000" @click="()=>{popupSettingsCommands.close()}">修改</button>
				<button type="primary" v-if="editCommandArrayIndex > 0" @click="moveCommandTo(0,options.commands)">移动到首位</button>
				<button type="primary" v-if="editCommandArrayIndex > 0" @click="()=>{ moveCommandTo(editCommandArrayIndex - 1,options.commands); }">前移一位</button>
				<button type="primary" v-if="editCommandArrayIndex + 1 < options.commands.length" @click="()=>{ moveCommandTo(options.commands.length - 1,options.commands); }">移动到末尾</button>
				<button type="primary" v-if="editCommandArrayIndex + 1 < options.commands.length" @click="()=>{ moveCommandTo(editCommandArrayIndex + 1,options.commands); }">后移一位</button>
				<button type="warn" @click="removeCommand">删除</button>
				<button type="default" @click="()=>{popupSettingsCommands.close()}">关闭</button>
			</uni-popup>
		</uni-tr>
	</uni-table>
</template>

<script setup>
	import { ref,defineEmits, reactive } from 'vue'
	
	const props = defineProps({
	  options: {
	    type: Object,
	    required: true,
		default:{
			encoding:'HEX',
			sendMod:'manually',
			autoInterval:500,
			isWaitAnswer:false,
			waitAnswerExpirse:5,
			waitAnswerExpirseReply:1,
			commands:[
				{Idx:0,devType:'温湿度',Name:'获取温湿度',command:'01 02 03 05 06 BC 01 02 03 05 06 BC 01 02 03 05 06 BC',encoding:'hex'},
				{Idx:1,devType:'温湿度',Name:'获取温湿度',command:'01 02 03 05 06 BC 01 02 03 05 06 BC 01 02 03 05 06 BC',encoding:'hex'},
				{Idx:2,devType:'温湿度',Name:'获取温湿度',command:'01 02 03 05 06 BC 01 02 03 05 06 BC 01 02 03 05 06 BC',encoding:'hex'},
				{Idx:3,devType:'温湿度',Name:'获取温湿度',command:'01 02 03 05 06 BC 01 02 03 05 06 BC 01 02 03 05 06 BC',encoding:'hex'},
				{Idx:4,devType:'温湿度',Name:'获取温湿度',command:'01 02 03 05 06 BC 01 02 03 05 06 BC 01 02 03 05 06 BC',encoding:'hex'}
			]
		}
	  }
	});
	
	const editCommandIdx=ref(0)
	const editCommandArrayIndex=ref(0)
	const emit = defineEmits(['onUpdate'])
	const listEncoding=[
		{text:'HEX',value:'HEX'},
		{text:'ASCII',value:'ASCII'},
		// {text:'ISO-8859-1',value:'ISO-8859-1'},
		// {text:'UTF8',value:'UTF8'},
		// {text:'GBK',value:'GBK'},
		// {text:'GB2312',value:'GB2312'},
		// {text:'GB18030',value:'GB18030'},
	];
	
	const sendMods=[{text:'手动发送',value:'manually'},{text:'自动发送',value:'auto'}];
	
	const popupSettingsCommands=ref(null);
	const openCommandsActions=(item,index)=>{
		editCommandArrayIndex.value = index;
		editCommandIdx.value=item.Idx;
		popupSettingsCommands.value.open();
	}
	
	//移动命令
	const moveCommandTo = (index,commands)=>{
		console.log(`toIndx ${index} commands`,commands);
		var listCommand=[];
		var [command]=commands.filter(x=>x.Idx == editCommandIdx.value);
		console.log(`toIndx ${index} command`,command);
		for(var i=0;i<commands.length;i++){
			if(i == index){
				listCommand.push(command)
			}
			
			if(commands[i].Idx != editCommandIdx.value){
				listCommand.push(commands[i])
			}
		}
		console.log(`toIndx ${index} commands`,listCommand);
		//options.commands = JSON.parse(JSON.stringify(listCommand));
		emit('onUpdate','commands',JSON.parse(JSON.stringify(listCommand)));	
		editCommandArrayIndex.value=index;
	}
	
	const removeCommand=()=>{
		emit('onUpdate','commands',props.options.commands.filter(x=>x.Idx != editCommandIdx.value));		
		popupSettingsCommands.value.close();
	}
	
	
	
</script>

<style>
	.uni-list {
	    position: relative;
	    width: 100%;
	    display: flex;
	    flex-direction: column;
	}
	
	
	.uni-list-cell {
	    position: relative;
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
		border-bottom: 1px solid #EBEEF5;
	}
	
	.uni-list 	.uni-list-cell:last-child{
		border-bottom: none;
	}
	
	.uni-list-cell-pd {
	    padding:10px 5px;
	}
</style>